'use client';
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';

const svgs: Obj = {
  success: `<svg t="1727061591580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1048" width="20" height="20"><path d="M874 150C674.09-50 349.91-50 150 150s-200 524.09 0 724 524.09 200 724 0 200-524.09 0-724zM760.57 440.57l-256 256a80 80 0 0 1-113.14 0l-128-128a80 80 0 0 1 113.14-113.14L448 526.86l199.43-199.43a80 80 0 0 1 113.14 113.14z" fill="#52C41A" p-id="1049"></path></svg>`,
  error: `<svg t="1727062014548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1498" width="20" height="20"><path d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z m169.71 568.57a80 80 0 0 1-113.14 113.14L512 625.14l-56.57 56.57a80 80 0 1 1-113.14-113.14L398.86 512l-56.57-56.57a80 80 0 1 1 113.14-113.14L512 398.86l56.57-56.57a80 80 0 1 1 113.14 113.14L625.14 512z" fill="#FF4D4F" p-id="1499"></path></svg>`,
  warning: `<svg t="1727062095251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1804" width="20" height="20"><path d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z m80 768a80 80 0 0 1-160 0v-32a80 80 0 0 1 160 0v32z m0-256a80 80 0 0 1-160 0V256a80 80 0 0 1 160 0v256z" fill="#FAAD14" p-id="1805"></path></svg>`,
  info: `<svg t="1727082996186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2320" width="20" height="20"><path d="M512 1024c282.771 0 512-229.23 512-512s-229.23-512-512-512-512 229.23-512 512 229.23 512 512 512zM432 256c0-44.183 35.817-80 80-80s80 35.817 80 80v31.999c0 44.183-35.817 80-80 80s-80-35.817-80-80v-31.999zM431.999 512c0-44.183 35.817-80 80-80s80 35.817 80 80v256c0 44.183-35.817 80-80 80s-80-35.817-80-80v-256z" p-id="2321" fill="#1677FF"></path></svg>`,
};

type ToastProps = {
  duration?: number;
  type?: 'info' | 'success' | 'error' | 'warning';
  message: string;
  onClose?: (...args: any[]) => void;
};

const Toast: React.FC<ToastProps> = ({
  duration = 1200,
  message,
  type,
  onClose,
}) => {
  const [visible, setVisible] = React.useState(true);
  const closeRef = useRef(onClose);

  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false);
      closeRef.current?.();
    }, duration);
  }, [duration]);

  return (
    <div className="toast toast-animation">
      <div className="toast-content">
        {type && svgs[type] != undefined && (
          <span
            style={{ display: 'inline-block', marginRight: '8px' }}
            dangerouslySetInnerHTML={{ __html: svgs[type] }}
          ></span>
        )}
        <span className="toast-message">{message}</span>
      </div>
    </div>
  );
};

// eslint-disable-next-line
export const showToast = (function getShowToast() {
  let isShowing = false;
  const queue = [] as Array<ToastProps>;

  return function openToast(opts: string | ToastProps) {
    let options: ToastProps;
    if (typeof opts === 'string') {
      options = {
        message: opts,
      };
    } else {
      options = opts;
    }

    if (isShowing) {
      queue.push(options);
      return;
    }

    let div = document.createElement('div');
    div.className = 'toast-wrapper';
    document.body.append(div);
    const toastRoot = ReactDOM.createRoot(div);

    const onClose = () => {
      toastRoot.unmount();
      document.body.removeChild(div);
      div = null as any;
      isShowing = false;

      options.onClose?.();

      // only one toast
      if (queue.length) {
        openToast(queue.shift()!);
      }
    };

    toastRoot.render(<Toast {...options} onClose={onClose} />);
    isShowing = true;
  };
})();

export default Toast;
